<div>
    <h1>自定义一个数字滚动插件</h1>
    <span>{{ $ctrl.nums }}</span><!--$crl指向父控制器-->
    <div class="text-box">
      <div class="roll" ng-class="rollList[$ctrl.nums.length]">
        <div ng-repeat="num in $ctrl.nums">{{ num }}</div>
      </div>
    </div>
</div>
<style>
    .text-box {
      height: 100px;
      width: 100px;
      overflow: hidden;
      background: black;
      color: #fff;
    }
    .roll div {
      height: 100px;
      font-size: 80px;
      line-height: 100px;
      text-align: center;
    }
    .roll_1 {
      animation: roll_1 3s forwards; /* Safari 与 Chrome */
    }
  
    .roll_2 {
      animation: roll_2 3s forwards; /* Safari 与 Chrome */
    }
    .roll_3 {
      animation: roll_3 3s forwards; /* Safari 与 Chrome */
    }
    .roll_4 {
      animation: roll_4 3s forwards; /* Safari 与 Chrome */
    }
    .roll_5 {
      animation: roll_5 3s forwards; /* Safari 与 Chrome */
    }
    .roll_6 {
      animation: roll_6 3s forwards; /* Safari 与 Chrome */
    }
    .roll_7 {
      animation: roll_7 3s forwards; /* Safari 与 Chrome */
    }
  
    .roll_8 {
      animation: roll_8 3s forwards; /* Safari 与 Chrome */
    }
  
    /*省略roll_2——roll_8*/
  
    .roll_9 {
      animation: roll_9 3s forwards; /* Safari 与 Chrome */
    }
  
    @keyframes roll_1 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -100px, 0);
      }
    }
  
      @keyframes roll_2 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -200px, 0);
      }
    }
  
    @keyframes roll_3 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -300px, 0);
      }
    }
  
    @keyframes roll_4 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -400px, 0);
      }
    }
  
    @keyframes roll_5 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -500px, 0);
      }
    }
  
    @keyframes roll_6 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -600px, 0);
      }
    }
  
    @keyframes roll_7 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -700px, 0);
      }
    }
  
    @keyframes roll_8 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -800px, 0);
      }
    }
  
      /*省略roll_2——roll_8*/
  
    @keyframes roll_9 /* Safari 与 Chrome */
    {
      0% {
        transform: translate3d(0, 0px, 0);
      }
      100% {
        transform: translate3d(0, -900px, 0);
      }
    }
</style>